﻿@model SimpleForum.Data.Models.ViewModels.UserRegisterViewModel

@{
    ViewBag.Title = "Register";
}

<div id="content-top">
    <h2>@ViewBag.Title</h2>
    <h3><a href="/">back</a></h3>
    <span class="clearfix">&nbsp;</span>
</div>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    @Html.ValidationMessage("error")

    <div class="box half align-left">
        <h3>Required Information</h3>

        <div class="box-container">
            <p class="half align-right">
                @Html.LabelFor(x => x.Email) @Html.EditorFor(x => x.Email)<br />
                @Html.ValidationMessageFor(x => x.Email)<br />
            </p>
            <p class="half align-left">
                @Html.LabelFor(x => x.UserName) @Html.EditorFor(x => x.UserName)<br />
                @Html.ValidationMessageFor(x => x.UserName)<br />
            </p>
            <p class="half align-left">
                @Html.LabelFor(x => x.Password) @Html.EditorFor(x => x.Password)<br />
                @Html.ValidationMessageFor(x => x.Password)<br />
            </p>
            <p class="half align-right">
                @Html.LabelFor(x => x.PasswordConfirm) @Html.EditorFor(x => x.PasswordConfirm)<br />
                @Html.ValidationMessageFor(x => x.PasswordConfirm)<br />
            </p>

            <span class="clearfix">&nbsp;</span>
        </div>
    </div>

    <div class="box half align-right">
        <h3>Optional Information</h3>

        <div class="box-container">
            <p class="half align-left">
                @Html.LabelFor(x => x.FacebookUsername) @Html.ValidationMessageFor(x => x.FacebookUsername)<br />
                @Html.EditorFor(x => x.FacebookUsername)
            </p>
            <p class="half align-right">
                @Html.LabelFor(x => x.TwitterUsername) @Html.ValidationMessageFor(x => x.TwitterUsername)<br />
                @Html.EditorFor(x => x.TwitterUsername)
            </p>
            <p class="half align-left" id="FacebookSocialCard"></p>
            <p class="half align-right" id="TwitterSocialCard"></p>

            <span class="clearfix">&nbsp;</span>
        </div>
    </div>

    <div class="box half align-right">
        <div class="box-container">
            <input type="submit" class="align-right" value="Register" />

            <span class="clearfix">&nbsp;</span>
        </div>
    </div>
}

<span class="clearfix">&nbsp;</span>

@Html.Resource(@<script type="text/javascript" src="@Url.Content("~/Content/JS/jquery.validate.min.js")"></script>, "js")
@Html.Resource(@<script type="text/javascript" src="@Url.Content("~/Content/JS/jquery.validate.unobtrusive.min.js")"></script>, "js")
@Html.Resource(@<script type="text/javascript">
    $(document).ready(function () {
        $('#FacebookUsername,#TwitterUsername').blur(function () {
            if (this.value.length >= 2) {
                var what = $(this).attr('id').replace('Username', '');
                $('#' + what + 'SocialCard').load('/User/Get' + what + 'SocialCard', { 'Username': this.value });
            }
        });
    });
</script>, "js")